<!--
 * @Author: xjt
 * @Date: 2021-06-24 23:29:47
 * @LastEditTime: 2021-06-30 20:17:14
 * @Description: 办理入住
 * @LastEditors: cqg
-->
<template>
  <basic-container v-loading="loading" element-loading-text="数据加载中...">
    <dataList
      placeholder="请输入姓名"
      searchName="name"
      :pageInfo="pager"
      :listData="tableData"
      :filterList="filterList"
      :selectData="selectDataArr"
      :menuList="[]"
      :dataInfo="dataInfo"
      :operaInfo="operaInfo"
      operaColumnWidth="120"
      :openIndex="true"
      @btn-click="handleBtnClick"
    ></dataList>
    <InfoTabs ref="infoTabs" :componentHideIds="componentIds" active="timeOutInfo" />
    <adialog title="新增" width="600px" ref="dialog" @submit="submit"></adialog>
  </basic-container>
</template>

<style lang="scss" scoped>
.operateMain {
  /deep/ .top-buttons {
    float: right;
    width: 50%;
  }
  /deep/ .v-search {
    width: 50%;
    justify-content: flex-start;
  }
  /deep/ .operaColumn .el-button {
    color: var(--color);
    text-align: center !important;
  }
}
</style>


<script>
import { getpagequery } from "@/views/yq-personnel/api/health.js";
import InfoTabs from "@/components/business/user-details/index.vue";
import adialog from "./dialog";
import { extractName } from "@/utils/extract";
import { getDict } from "@/utils";

export default {
  components: { InfoTabs, adialog },
  provide() {
    return {
      initList: this.queryData,
      personId: () => this.currentPersonId,
      moveInfoId: () => this.currentMoveInfoId,
      hotelBaseInfoId: () => this.currentHotelBaseInfoId,
      moveEndTime:()=>this.moveEndTime
    };
  },
  beforeMount() {
    // 请求列表数据
    this.queryData();
  },
  computed: {
    // 操作按钮
    operaInfo() {
      return [
        {
          label: "隔离延期",
          name: "add",
        },
        "preview",
      ];
    },
    // 筛选项
    filterList() {
      return [
        {
          label: "电话号码",
          inputType: "input",
          name: "telPhone",
        },
        { label: "房号", inputType: "input", name: "roomNum" },
        { label: "证件号码", inputType: "input", name: "cardId" },
      ];
    },
    dataInfo() {
      return [
        { label: "隔离点名称", prop: "hotelName" },
        { label: "详细地址", prop: "hotelAddr" },
        { label: "房号", prop: "roomNum" },
        { label: "姓名", prop: "name" },
        { label: "证件类型", prop: "cardType", formatter: this.dataFormatter },
        { label: "证件号码", prop: "cardId" },
        { label: "电话号码", prop: "telPhone" },
        { label: "入住开始时间", prop: "moveStartTime" },
        { label: "入住终止时间", prop: "moveEndTime" },
        {
          label: "人员状态",
          prop: "personState",
          formatter: this.dataFormatter,
        },
      ];
    },
  },
  data() {
    return {
      // 表格列表数据
      tableData: [],
      currentPersonId: "",
      currentMoveInfoId: "",
      currentHotelBaseInfoId: "",
      // 请求参数
      params: {
        current: 1,
        size: 20,
        keyword: "",
      },
      // 选中的数据
      selectDataArr: [],
      // 分页
      pager: {
        total: 0, // 总页数
        current: 1, // 当前页数
        size: 20, // 每页显示多少条
      },
      // 页面loading
      loading: false,
      hotelList: [],
      moveEndTime:null,
      componentIds: [5, 6, 7, 8], // 隐藏的查看tab页
    };
  },
  methods: {
    //格式化表格字典值
    dataFormatter(row, column, cellValue) {
      switch (column.property) {
        case "cardType":
          return extractName("card_type", row.cardType);
        case "personState":
          return extractName("person_state", row.personState);
        default:
          break;
      }
    },
    submit() {
      // 刷新列表
      this.queryData();
    },
    // 数据请求
    queryData(params = {}) {
      this.loading = true;
      let requestData = { ...this.params, ...params };
      requestData.qt = "glyq";
      requestData.personState = "21,22";
      if (requestData.signingDateStart == "") {
        delete requestData.signingDateStart;
      }
      if (requestData.signingDateEnd == "") {
        delete requestData.signingDateEnd;
      }
      getpagequery(requestData)
        .then((res) => {
          const { current, size, total, records } = res.data.data;
          this.tableData = records;
          this.params = requestData;
          this.pager = { total, current, size };
        })
        .finally(() => {
          this.loading = false;
        });
    },
    deleteData(id) {},
    //表格按钮点击事件监听
    handleBtnClick({ type, row }) {
      this.currentMoveInfoId = row.moveInfoId;
      this.currentPersonId = row.personId;
      this.currentHotelBaseInfoId = row.hotelBaseInfoId;
      switch (type) {
        //查看
        case "preview":
          this.$refs.infoTabs.show({ type, row });
          this.moveEndTime = row.moveEndTime
          break;
        case "add":
          this.$refs.dialog.changeVisible({ type, row });
          break;
        default:
          break;
      }
    },
  },
};
</script>
